//个人中心
function all(){
	first();
	find();
	geren();
}
function first(){
	 $(function(){
 	var $con = $("#ctn .ctns");
	      $("#title li").on("tap",function(){
	      		$(this).css({
	      			"color":"#00CA39",
	      			"border-bottom":"#00CA39 solid 0.05rem"
	      		}).siblings().css({
	      			"color":"#666",
	      			"border-bottom":"none"
	      		});
//	      abc("#tab").css("background","rgba(255,255,255,0.5");
	      console.log($con.eq($(this).index()).find('ul'))
	      		$con.eq($(this).index()).css({"display":"block",'overflow':'auto','height':'9.5rem'}).siblings().css({"display":"none",'overflow':'hidden','height':'auto'});
	      $con.eq($(this).index()).find('ul').css('height','auto').siblings().css('height','9.5rem')
	      })
	      abc.ajax({
	      	type:"get",
	      	url:"data/data.json",
	      	async:true,
	      	dataType:"json",
	      	success:function(msg){
	      		var data = msg;
	      		var $ctn_1 = $(".ctns1");
	      		var $pic = $("<ul class='pic'></ul>");
				for (var i = 0; i < data.length; i++) {
					if (data[i]) {
						$pic.append("<li><div class='lp'><img src=" + data[i].images + "/></div><p class='word'>" + data[i].title + "</p></li>")
					}
				}
					$ctn_1.append($pic);
				}
	      });
		
	     abc.ajax({
	     	type:"get",
	     	url:"data/data2.json",
	     	async:true,
	     	dataType:"json",
	     	success:function(dd){
	     		var data2 = dd;
	     		var $ctn_2 = $(".ctns2");
	     		var $pic2 = $("<ul class='pic2'></ul>");
	     		for (var i = 0; i < data2.length; i++) {
					if (data2[i]) {
						$pic2.append("<li><div class='lp2'><img src=" + data2[i].images + "/></div><p class='word2'>" + data2[i].title + "</p></li>")
					}
				}
					$ctn_2.append($pic2);
	     	}
	     });
	     abc.ajax({
	     	type:"get",
	     	url:"data/data3.json",
	     	async:true,
	     	dataType:"json",
	     	success:function(mj){
	     		var data3 = mj;
	     		var $ctn_3 = $(".ctns3");
	     		var $pic3 = $("<ul class='pic3'></ul>");
	     		for (var i = 0; i < data3.length; i++) {
					if (data3[i]) {
						$pic3.append("<li><div class='lp3'><img src=" + data3[i].images + "/></div><p class='word3'>" + data3[i].title + "</p></li>")
					}
				}
					$ctn_3.append($pic3);
	     	}
	     });
	     
 	})
}
out();
dot();
// sure();
function out(){
	abc('.ball').on('touchstart',function(event){
		var e = event || window.event;
		// 默认事件
		e.preventDefault();
		abc(document).on('touchmove',function(event){
			var e = event || window.event;
			var l_x = e.originalEvent.changedTouches[0].pageX- abc('.ball_img').width()/2;
			var l_y = e.originalEvent.changedTouches[0].pageY - abc('header').height()- abc('.ball_img').height()/2;
			if(l_x<=0){
				l_x = 0;
			}else if(l_x >= abc('.image .img').width() - abc('.ball_img').width()){
				l_x = abc('.image .img').width() - abc('.ball_img').width();
			}
			if(l_y <= 0){
				l_y = 0;
			}else if(l_y >= abc('.image .img').height()- abc('.ball_img').height()){
				l_y = abc('.image .img').height() - abc('.ball_img').height();
			}
			var h = abc('.ball_img').height();
			var w = abc('.ball_img').width()-1;
			var h_pl = abc('.image .img').height()/h;
			var w_pl = abc('.image .img').width()/w;
			var s_w = abc('.small').width();
			var s_h = abc('.small').height();
			var add_h = abc('.img_ok').height();
			var add_w = abc('.img_ok').width();
			var pl_h = h_pl - abc('.image .img').height()/add_h; 
			var pl_w = w_pl - abc('.image .img').width()/add_w; 
			
			if(pl_w<=0){
				pl_w = -pl_w;
			}
			if(pl_h<=0){
				pl_h = -pl_h;
			}
			abc('.ball').css({'top':l_y,'left':l_x})
			abc('.ball img').css({'marginTop':-l_y,'marginLeft':-l_x});
			abc('.img_ok img').css({'marginTop':-(l_y - pl_w),'marginLeft':-(l_x - pl_h)});
		})
		abc(document).on('touchend',function(){
			abc(document).off("touchmove");
			abc(document).ontouchend = null;
		})
	})
	abc('.s_s').on('touchend',function(){
		abc('.image').hide();
	})
}	
function dot(){
	abc('.dot').on('touchstart',function(e){
		e.preventDefault();
		e.stopPropagation();
		var b_h = abc('.ball_img').height();
		var b_w = abc('.ball_img').width();
		abc('.dot').on('touchmove',function(event){
			var e = event || window.event;
			var l_x = e.originalEvent.changedTouches[0].pageX  - abc('.dot').width()/2 - abc('.ball').position().left;
			var l_y = e.originalEvent.changedTouches[0].pageY - abc('header').height()- abc('.dot').height()/2 - abc('.ball').position().top;
			if(l_x<=0){
				l_x = 0;
			}else if(l_x >= abc('.image .img').width()){
				l_x = abc('.image .img').width();
			}
			if(l_y <= 0){
				l_y = 0;
			}else if(l_y >= abc('.image .img').height()){
				l_y = abc('.image .img').height();
			}
			abc('.dot').css({'top':l_y - abc('.dot').height()/2,'left':l_x - abc('.dot').height()/2})
			var y_h = parseInt(abc('.dot').css('top'));
			var y_w = parseInt(abc('.dot').css('left'));
			var h = l_y;
			var w = l_x;
			abc('.ball .ball_img').css({'height':h,'width':w});
			var h_pl = abc('.image .img').height()/h;
			var w_pl = abc('.image .img').width()/w;
			var s_w = abc('.small').width();
			var s_h = abc('.small').height();
			var add_h = abc('.img_ok').height();
			var add_w = abc('.img_ok').width();
			var s_bw = add_w*w_pl;
			var s_bh = add_h*h_pl;
			if(s_bw<=add_w){
				s_bw = add_w;
				abc('.small img').css('marginLeft',0)
			}
			if(s_bh<=add_h){
				s_bh = add_h;
				abc('.small img').css('marginTop',0)

			}
			abc('.small img').css({'width':s_bw,'height':s_bh})
		
			
		})
		abc('.dot').on('touchend',function(){
		
		})
	})

}
function sure(){
	var canvas = document.getElementById('cv');
			// 上下文
	var context = canvas.getContext('2d'); 
	var i_w = abc('.img_ok').width();
	var i_h = abc('.img_ok').height();
	// console.log(i_w,i_h)
		abc('#cv').attr('width',i_w);
		abc('#cv').attr('height',i_h);
		// canvas.
	abc('.sure').on('touchend',function(){

			var img = new Image()
			img.src = abc('.ball_img img').attr('src');
			img.onload = function(){
				var y = abc('.ball').position().top;
				var x = abc('.ball').position().left;
				var h = abc('.ball_img').height();
				var w = abc('.ball_img').width();
				var add_h = abc('.img_ok').height();
				var add_w = abc('.img_ok').width();
				console.log(x,y,h,w,add_w,add_h);
				var p = context.createPattern(img,'repeat-x');
				// context.fillStyle = p;
				context.fillRect(0,0,h,w)
				context.drawImage(img,x,y,w,h,0,0,add_w,add_h) 

			}
	})
}
function geren(){
	
		abc('.geren li').on('touchend',function(){
			abc(this).find('.title').addClass('xian').end().siblings().find('.title').removeClass('xian');
			abc(this).css('borderColor','#0BC53E').siblings().css('borderColor','#ffffff');
			var index = abc(this).index();
			abc('.tab .yes').eq(index).show().siblings().hide();
		})
		//个人中心粉丝关注照片数量
	var n_1 = abc('.geren .photos div').length;
	var n_2 = abc('.geren .gz .people').length;
	var n_3 = abc('.geren .fans .people').length;
	abc('.geren ul li').eq(0).find('.title span').html(n_1);
	abc('.geren ul li').eq(1).find('.title span').html(n_2);
	abc('.geren ul li').eq(2).find('.title span').html(n_3);
	// 如果关注里有已关注的人名，则粉丝栏里的关注颜色变暗；
	for(var i = 0;i<n_2;i++){
		var h_1 = abc('.geren .gz .people .name').eq(i).html();
		for(var j = 0;j<n_3;j++){
			var h_2 = abc('.geren .fans .people .name').eq(j).html();
			if(h_1 == h_2){
				 abc('.geren .fans .people .name').eq(j).parent().parent().find('.f_right').css({'color':'#DDDDDD','borderColor':'#DDDDDD'});
			}
		}
		
	}
	abc('.liao .left').on('touchend',function(){
		abc('.image').show();
	})
	
	

	// footer
	abc('footer li').on('touchend',function(){
		abc(this).addClass('touch_c').siblings().removeClass('touch_c');
		var i = abc(this).index();
		abc('.c_f').eq(i).show().siblings().hide();
		abc('.h_t').eq(i).show().siblings().hide();
		if(i==2){
			if(abc('.image')){
				abc('.image').hide();
			}
		}
		if(i==3){
			abc('.c_f').hide();
		}
	})
	//function footer(){
//		console.log(abc('.foot li').length);
//		abc('.foot li').on('tap',function(){
//			console.log(1);
//			console.log(abc(this).index())
//		abc(this).addClass('touch_c').siblings().removeClass('touch_c');
//		var a = abc(this).index();
//		if(a == 3){
//			abc('.c_f').hide();
//		}
//		abc('.c_f').eq(a).show().siblings().hide();
//		abc('.h_t').eq(i).show().siblings().hide();
//		if(abc('.image')){
//			abc('.image').hide();
//		}
//	})
	//}
	abc('.h_t span').on('touchend',function(){
		var h_in = abc(this).index();
		abc(this).addClass('c_bian').siblings().removeClass('c_bian');
		abc('.first_b').eq(h_in).show().siblings().hide();
	})
	//左拉菜单出现
	abc('.menu').on('touchend',function(){
		abc('.g_mask').show();
		abc('.g_three').show();
		//左拉菜单li点击
		abc('.g_three .g_tab li').on('touchend',function(){
			abc('.g_mask').hide();
			abc('.c_f').eq(0).show().siblings().hide();
			abc('.hot').show();
			abc('header .m_right .h_t').eq(0).show().siblings().hide();
			abc('footer li').eq(0).addClass('touch_c').siblings().removeClass('touch_c');
			abc('.hot .ctns').eq(abc(this).index()).show().siblings().hide();;
			abc('.h_t span').eq(0).addClass('c_bian').siblings().removeClass('c_bian');
			abc('.h_gz').hide();
			abc('.hot #title li').eq(abc(this).index()).css({'color':'rgb(0, 202, 57)','borderColor':'rgb(0, 202, 57)','borderWidth':'0.05rem','borderBottomStyle':'solid'}).siblings().css({'color':'rgb(102, 102, 102)','borderStyle':'none'});
		})
		
	})
	abc('body').on('touchend',function(e){
		var g_t_dis = abc('.g_three').css('display');
		if(g_t_dis != 'none'){
			if(
				abc(e.target).is(".g_three")||abc(e.target).is(".menu")){
			}else{
				abc('.g_three').hide();
				abc('.g_mask').hide();
			}
		}
	})
		

}
function find(){

	var us = document.getElementById("key");
	var psw = document.getElementById("val");
	var g_rnameZ = document.getElementById("g_rnameZ");
	var g_phone = document.getElementById("g_phone");
	var ps = document.getElementById("g_password");
	// 存储数据
	var tel = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/;
	var pass = /^\w{6,18}$/;//密码验证
	//电话号验证
	$("#key").blur(function(){
	  var val = this.value;
	  if(!(tel.test(val))){
	    $(".g_tips").html("请输入正确手机号");
	    $('#key').val('');
	  }else{
	    $(".g_tips").html("");
	  }
	})
	//密码验证
	$("#val").blur(function(){
	  var val = this.value;
	  if(!(pass.test(val))){
	    $(".g_tips").html("请输入6-18位密码");
	    $('#val').val('');
	  }else{
	    $(".g_tips").html("");
	  }
	})
	//存储信息
	$("#g_ok").on("singleTap",function(){
	  var userInfo = {
	    username: us.value,
	    password: psw.value,
	    g_nam: g_rnameZ.value
	  };
	  localStorage.setItem("userInfo", JSON.stringify(userInfo));
	  var val1 = us.value;
	  var val2 = psw.value;
	  var val3 = g_rnameZ.value;
//	  console.log(val1+"/"+val2+"/"+val3);
	  if(!(val1!=''&&val2!=''&&val3!='')){
	    $(".g_tips").html("请填入完整信息");
	  }else{
	    // $("#g_mask").css("display","none");
	    $(".g_login").css("display","block")
	    abc('.g_register').hide(500)
	  }
	  })
	  $(".g_false").on("tap",function(){
	    // alert(1);
	    abc('.g_register').hide(500)
	    $(".g_mask").css("display","none");
	  })
	//登录
	var flag = false;
	$(".g_ipt").on("tap",function(){
	    var str = localStorage.getItem("userInfo")//存储护登录信息
	    var userInfo = JSON.parse(str);
	    if(userInfo){
	      console.log(userInfo);
	      var user = userInfo.username;
	      var pass = userInfo.password;
	      var nam = userInfo.g_nam;
	      console.log(user);
	      console.log(pass);
	      console.log(nam);
	      var geren_img = abc('.geren .top .left img').attr('src');
	      var geren_say = abc('.geren .top .right .say').html();
	      abc('.g_three .g_pic img').attr('src',geren_img);
	      abc('.g_three .g_troduce').html(geren_say);
	      abc('.geren .top .right strong').html(nam);
	      abc('.g_three .g_head').html(nam);
	      var secondInfo = {
	        users: g_phone.value,
	        mim: ps.value
	      };
	      sessionStorage.setItem("secondInfo", JSON.stringify(userInfo));
	      var user_b = secondInfo.users;
	      var pass_b = secondInfo.mim;
	      console.log(user_b);
	      console.log(pass_b);
	      if(user_b==user&&pass_b==pass){
	        alert("登录成功");
	        flag = true;
	        $(".g_login").css("display","none")
	        $("#g_mask").css("display","none");
	      }else{
	        alert("用户名或密码错误");
	        ps.value = '';
	        flag = false;
	      }
	    }else {
	      alert("亲，用户名不存在，请重新登录！");
	      g_phone.value = '';
	      ps.value = '';
	      flag = false;
	    }
	})
	// 安全退出  事件绑定未知
	$(".foot li").eq(3).on("tap",function(){
		if(flag){
			 sessionStorage.clear();
			  alert("安全退出");
			  $('#g_phone').val('');
			  $('#g_password').val('');
			  $("#m_r_attent").css("background","#0CC440");
			  flag = false;
		}else{
			alert('您未登陆');
		}
	 
	  
	})
	// 判断是否登录
	$(".m_r_attent").on("tap",function(){
//		var t = abc(this)
	var t = abc(this).parent().parent();
		if(flag==false){
		    $("#g_mask").css("display","block");
		    $("#g_login").css("display","block");
		   
		  }else{
		  	//关注变色
		     var t_c =  abc(this).css('backgroundColor');
			if(t_c == 'rgb(229, 229, 229)'){
				alert('您已关注');
			}else{
				focus(t);
		  	}
			$(this).addClass('m_r_attent2')
		}
	})
	$(".g_regiser").on("tap",function(){
	    $("#g_login").css("display","none");
//	    $(".g_register").css({'opacity':'1','display':'block'});
//	    abc(".g_register").animate({display:'block'},500);
		abc('.g_register').show(500)
	  })
	$(".g_close").on("tap",function(){
		  $("#g_mask").css("display","none");
		  $("#g_login").css("display","none");
		$("#g_false").on("tap",function(){
		  $("#g_mask").css("display","none");
		  abc('.g_register').hide(500)
		})
	})
	}

function focus(t){
	//获取发现页的关注内容
	var d_img = t.find(abc('.m_l img')).attr('src');
	var d_name = t.find(abc('.m_b p')).eq(0).html();
	var d_say = t.find(abc('.m_b p')).eq(1).html();
	console.log(d_img);
	console.log(d_name);
	console.log(d_say);
	abc('<div class="people"><div class="p_left"><img src='+d_img+' alt=""></div><div class="p_right"><div class="name">'+d_name+'</div><div class="say">'+d_say+'</div><div class="fans">粉丝<span>1004w</span></div></div></div>').appendTo('.geren .gz');
	var n_2 = abc('.geren .gz .people').length;
	abc('.geren ul li').eq(1).find('.title span').html(n_2);	
	

}
g_focus()
function g_focus(){
		abc('.f_right').on('tap',function(){
//		console.log(abc(this).parent().index())
var p = abc(this).parent();
var p_c =  abc(this).css('color');
			if(p_c == 'rgb(221, 221, 221)'){
				alert('您已关注');
			}else{
				//获取个人中心页的关注内容
			var p_img = p.find(abc('.p_left img')).attr('src');
			var p_name = p.find(abc('.p_right .name')).html();
			var p_say = p.find(abc('.p_right .say')).html();
			var p_fans = p.find(abc('.p_right .fans')).html();
			console.log(p_img);
			console.log(p_name);
			console.log(p_say);
			console.log(p_fans);
			abc('<div class="people"><div class="p_left"><img src='+p_img+' alt=""></div><div class="p_right"><div class="name">'+p_name+'</div><div class="say">'+p_say+'</div><div class="fans">粉丝<span>'+p_fans+'</span></div></div></div>').appendTo('.geren .gz');
			var n_2 = abc('.geren .gz .people').length;
			abc('.geren ul li').eq(1).find('.title span').html(n_2);
		 }
	var n_3 = abc('.geren .fans .people').length;
	abc('.geren ul li').eq(2).find('.title span').html(n_3);
	// 如果关注里有已关注的人名，则粉丝栏里的关注颜色变暗；
	for(var i = 0;i<n_2;i++){
		var h_1 = abc('.geren .gz .people .name').eq(i).html();
		for(var j = 0;j<n_3;j++){
			var h_2 = abc('.geren .fans .people .name').eq(j).html();
			if(h_1 == h_2){
				 abc('.geren .fans .people .name').eq(j).parent().parent().find('.f_right').css({'color':'#DDDDDD','borderColor':'#DDDDDD'});
			}
		}
		
	}
		
			
	})
}
